<template>
  <div class="publish">
    <HeaderBar title="任务发布" @back="goBack" />
    <div class="card">
      <div class="label">任务信息</div>
      <van-field v-model="title" placeholder="请输入简短的标题来描述你的任务" />
      <van-field v-model="desc" type="textarea" rows="3" maxlength="200" show-word-limit placeholder="填写你的详细需求..." />
      <van-uploader v-model="fileList" :max-count="3" />
      <img src="https://picsum.photos/40/40?random=6" class="avatar" />
    </div>
    <van-field v-model="phone" label="电话号码" placeholder="请输入手机号" />
    <div class="btns">
      <van-button type="default" class="btn-cancel" @click="goBack">取消</van-button>
      <van-button type="primary" class="btn-pub" :disabled="!canPublish" @click="onPublish">立即发布</van-button>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'
import { useTaskStore } from '../store/index.js'
import HeaderBar from '../components/HeaderBar.vue'
const router = useRouter()
const route = useRoute()
const store = useTaskStore()
const title = ref('')
const desc = ref('')
const phone = ref('')
const fileList = ref([])
const editId = ref(null)
const canPublish = computed(() => title.value && desc.value && phone.value)

onMounted(() => {
  if (route.query.edit) {
    const t = store.tasks.find(t => t.id == route.query.edit)
    if (t) {
      editId.value = t.id
      title.value = t.title
      desc.value = t.content
      phone.value = t.phone
      fileList.value = (t.images || []).map(url => ({ url }))
    }
  }
})
function goBack() { router.back() }
function onPublish() {
  if (!canPublish.value) {
    showToast('请填写完整信息')
    return
  }
  if (editId.value) {
    // 编辑模式，更新任务
    const idx = store.tasks.findIndex(t => t.id == editId.value)
    if (idx > -1) {
      store.tasks[idx] = {
        ...store.tasks[idx],
        title: title.value,
        content: desc.value,
        phone: phone.value,
        images: fileList.value.map(f => f.url || f.content)
      }
    }
    showToast({ message: '修改成功', type: 'success' })
  } else {
    store.addTask({
      id: Date.now(),
      title: title.value,
      content: desc.value,
      phone: phone.value,
      images: fileList.value.map(f => f.url || f.content),
      author: '我',
      time: new Date().toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }),
      avatar: 'https://picsum.photos/40/40?random=6',
      owner: true
    })
    showToast({ message: '发布成功', type: 'success' })
  }
  setTimeout(() => { router.push('/') }, 1000)
}
</script>
<style scoped>
.publish { 
  padding: 0 0 32px 0; 
  background: #fafbfa; 
  min-height: 100vh; 
  width: 100vw;
  box-sizing: border-box;
}
.card { 
  background: #fff; 
  border-radius: 12px; 
  padding: 16px; 
  margin: 8px; 
  margin-bottom: 8px; 
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06); 
}
.label { 
  font-size: 15px; 
  color: #666; 
  margin-bottom: 8px; 
  font-weight: 500; 
}
.btns { 
  display: flex; 
  justify-content: space-between; 
  gap: 8px; 
  margin: 24px 8px 0 8px; 
}
.btn-cancel { 
  flex: 1; 
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 500;
}
.btn-pub { 
  flex: 1; 
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 500;
}
.avatar { 
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  margin-top: 12px; 
  margin-bottom: 12px; 
}
.publish-btn {
  position: fixed;
  right: 16px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 1000;
}
</style> 